<template>
    <div>
        <div v-show="isComment === false">
            <div class="title">视频列表</div>
            <!-- 上部导航 -->
            <SelectBar :barData="['搜索','历史记录']" @handleSelect="handleSelect"></SelectBar>
            
            <div style="background-color: #fff;width: 100%;" v-show="selectIndex === 0">
                <div style="padding: 10px 10px 10px 10px; display: flex;">
                    <el-input placeholder="请输入视频编号/用户id" @click-suffix="search" suffix-icon="el-icon-search"
                        style="width: 300px;">
                    </el-input>
                </div>

                <!-- 表格 -->
                <div style="padding:10px;margin-bottom: 100px;margin-right:50px ;" :show-overflow-tooltip="true">
                    <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%">
                        <el-table-column prop="name" label="视频标题" width="320">
                            <template slot-scope="scope">
                                <div style=" display: flex;align-items: center;">
                                    <el-image style="width: 150px; height: 80px" :src="scope.row.image"
                                        fit="scale-down"></el-image>
                                    <div>
                                        {{ scope.row.name }}
                                    </div>
                                </div>

                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="视频编号" width="240">
                        </el-table-column>
                        <el-table-column prop="author" label="作者" width="220">
                        </el-table-column>
                        <el-table-column prop="userId" label="用户id号" width="220">
                        </el-table-column>
                        <el-table-column prop="category" label="分类" width="120">
                        </el-table-column>
                        <el-table-column prop="uploadTime" label="上传时间" width="220">
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <span class="handle" @click="viewComment">查看</span>
                        </el-table-column>

                    </el-table>
                    <el-pagination style="margin-top: 20px;" :page-size="100" layout="total, prev, pager, next"
                        :total="1000">
                    </el-pagination>
                </div>
            </div>
            <!-- 历史记录 -->
            <div style="background-color: #fff;width: 100%;" v-show="selectIndex === 1">
                <div style="padding: 10px 10px 10px 10px; display: flex;">
                    <el-input placeholder="请输入视频编号/用户id" @click-suffix="search" suffix-icon="el-icon-search"
                        style="width: 300px;">
                    </el-input>
                </div>

                <!-- 表格 -->

                <div style="padding:10px;margin-bottom: 100px;margin-right:50px ;">
                    <el-table ref="multipleTable" border :data="historyList" tooltip-effect="dark" style="width: 100%">
                        <el-table-column prop="username" label="发布者" width="220">
                        </el-table-column>
                        <el-table-column prop="comment" label="评论内容" width="305" :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column prop="userId" label="发布者id" width="160">
                        </el-table-column>
                        <el-table-column prop="uploadTime" label="发布时间" width="220">
                        </el-table-column>
                        <el-table-column prop="uploadTime" label="删除时间" width="220">
                        </el-table-column>
                        <el-table-column label="状态" width="220">
                            <template slot-scope="scope">
                                <div v-if="scope.row.status === 2" style="color: red;">已删除</div>
                                <div v-if="scope.row.status === 3" style="color: rgb(0, 183, 255);">已撤销</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="220">
                            <template slot-scope="scope">
                                <span class="handle" @click="revoke(scope.row)">撤销</span>
                            </template>
                        </el-table-column>

                    </el-table>
                    <el-pagination style="margin-top: 20px;" :page-size="100" layout="total, prev, pager, next"
                        :total="1000">
                    </el-pagination>
                </div>



            </div>





        </div>
        <div v-show="isComment === true">
            <div class="title">评论审核</div>
            <div class="box">
                <el-container>
                    <el-image style="width: 235px; height: 130px;margin: 10px 0 10px 10px;" :src="videoDetails.image"
                        fit="scale-down"></el-image>
                    <div>
                        <div style="margin: 10px 0 10px 10px;font-size: larger;font-weight: 600;">
                            {{ videoDetails.name }}
                        </div>
                        <div style="float: right;color: #6E7079;">
                            {{ videoDetails.uploadTime }}
                        </div>
                        <div style="margin: 10px 0 10px 10px;color: #6E7079;">
                            {{ videoDetails.id }}
                        </div>
                        <div style="margin: 10px 0 10px 10px;color: #6E7079;">
                            {{ videoDetails.author }}
                        </div>
                        <div style="margin: 10px 0 10px 10px;">
                            <el-tag v-for="item in videoDetails.tags" :key="item" style="margin-right: 10px;">{{ item
                            }}</el-tag>
                        </div>
                    </div>
                </el-container>
            </div>
            <!-- 评论 -->
            <div class="box" v-show="isDetail === false">
                <div class="title">
                    评论
                </div>
                <div style="margin-left: 10px;color:#6E7079;font-size: small;">共{{ commentList.length }}条
                </div>
                <div style="padding:10px;margin-bottom: 100px;margin-right:50px ;">
                    <el-table ref="multipleTable" border :data="commentList" tooltip-effect="dark" style="width: 100%">
                        <el-table-column prop="username" label="发布者" width="220">
                        </el-table-column>
                        <el-table-column prop="comment" label="评论内容" width="305" :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column prop="userId" label="用户id号" width="160">
                        </el-table-column>
                        <el-table-column prop="uploadTime" label="发布时间" width="220">
                        </el-table-column>
                        <el-table-column label="操作" width="220">
                            <template slot-scope="scope">
                                <span class="handle" @click="viewDetail(scope.row)">查看</span>
                                <span class="handle" style="color: red;" @click="delComment(scope.row)">删除并警告</span>
                            </template>
                        </el-table-column>

                    </el-table>
                    <el-pagination style="margin-top: 20px;" :page-size="100" layout="total, prev, pager, next"
                        :total="1000">
                    </el-pagination>
                </div>
                <el-button type="primary" @click="isComment = false">返回</el-button>

            </div>

            <!-- 评论内容 -->
            <div class="box" v-show="isDetail === true">
                <div class="title">
                    查看评论
                </div>
                <el-descriptions class="margin-top" :column="2">
                    <el-descriptions-item label="发布人">{{ commentDetails.username }}</el-descriptions-item>
                    <el-descriptions-item label="发布id">ID:{{ commentDetails.userId }}</el-descriptions-item>
                    <el-descriptions-item label="发布时间">{{ commentDetails.uploadTime }}</el-descriptions-item>
                    <el-descriptions-item label="子评论">{{ commentDetails.childComment }}条</el-descriptions-item>
                </el-descriptions>
                <el-descriptions class="margin-top" :column="3">
                    <el-descriptions-item label="点赞量">{{ commentDetails.liked }}</el-descriptions-item>
                    <el-descriptions-item label="踩量">{{ commentDetails.disliked }}</el-descriptions-item>
                    <el-descriptions-item label="举报量">{{ commentDetails.report }}</el-descriptions-item>
                    <el-descriptions-item label="发布内容">{{ commentDetails.comment }}</el-descriptions-item>
                </el-descriptions>
                <el-button type="primary" @click="isDetail = false">返回</el-button>
            </div>



        </div>



    </div>
</template>

<script>
import SelectBar from '@/components/SelectBar.vue'
export default {
    data() {
        return {
            selectIndex: 0,
            isComment: false,
            isDetail: false,
            historyShow: false,
            tableData: [
                {
                    id: 'AV20230413111', name: 'AR视频体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: 'AR',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`,
                    status: 0, format: 'MOV', image: 'https://img0.baidu.com/it/u=1184708380,2844326544&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=400',
                    tags: ['VR', '刺激', '视觉享受'], uploadTime: '2023-6-10 13:34:44'
                },
                {
                    id: 'AV20230413111', name: 'AR视频体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: 'AR',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`,
                    status: 0, format: 'MOV', image: 'https://img0.baidu.com/it/u=1184708380,2844326544&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=400',
                    tags: ['VR', '刺激', '视觉享受'], uploadTime: '2023-6-10 13:34:44'

                },
                {
                    id: 'AV20230413111', name: 'MR视频体验系列（一）之刺激过山车',
                    author: '我爱学习123', userId: '9552023413',
                    description: '这个视频很棒', category: 'MR',
                    video: `//www.douyin.com/aweme/v1/play/?video_id=v0200fg10000c8ia4ijc77udsnsnk0
                    fg&line=0&file_id=34d23d1953cc4a57b4cdfba2aae7e0ce&sign=d2
                    400a5561ddea07790cfb3bddefc6af&is_play_url=1&source=PackSourceEnum_MIX_AWEME&aid=6383`,
                    status: 0, format: 'MOV', image: 'https://img0.baidu.com/it/u=1184708380,2844326544&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=400',
                    tags: ['VR', '刺激', '视觉享受'], uploadTime: '2023-6-10 13:34:44'

                },
            ],
            videoDetails: {
                id: 'AV20230413111', name: 'AR视频体验系列（一）之刺激过山车',
                author: '我爱学习123', userId: '9552023413',
                description: '这个视频很棒', category: 'AR',
                video: `https://1259368925.vod2.myqcloud.com/68a7ff74vodcq1259368925/30bf824e387702292275154315/SWDnRxvHeisA.mp4`,
                status: 0, format: 'MOV', image: 'https://img0.baidu.com/it/u=1184708380,2844326544&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=400',
                tags: ['VR', '刺激', '视觉享受'], uploadTime: '2023-6-10 13:34:44'
            },
            commentList: [
                {
                    username: '小新123', comment: '视频做的很棒，希望能看见更多的创新和创意，加油噢123456789991212341',
                    userId: '9552023413', uploadTime: '2023-6-10 17:05'
                },
                {
                    username: '小新123', comment: '视频做的很棒，希望能看见更多的创新和创意，加油噢123456789991212341',
                    userId: '9552023413', uploadTime: '2023-6-10 17:05'
                },
                {
                    username: '小新123', comment: '视频做的很棒，希望能看见更多的创新和创意，加油噢123456789991212341',
                    userId: '9552023413', uploadTime: '2023-6-10 17:05'
                }
            ],
            commentDetails: {
                username: '小新123', comment: '视频做的很棒，希望能看见更多的创新和创意，加油噢123456789991212341',
                userId: '9552023413', uploadTime: '2023-6-10 17:05', childComment: 10, report: 10, liked: 200, disliked: 20
            },
            historyList: [
                {
                    username: '小新123', comment: '视频做的很棒，希望能看见更多的创新和创意，加油噢123456789991212341视频做的很棒，希望能看见更多的创新和创意，加油噢',
                    userId: '9552023413', uploadTime: '2023-6-10 17:05', deleteTime: '2023-6-10 18:05', status: 2
                },
                {
                    username: '小新123', comment: '视频做的很棒，希望能看见更多的创新和创意，加油噢123456789991212341',
                    userId: '9552023413', uploadTime: '2023-6-10 17:05', deleteTime: '2023-6-10 18:05', status: 3
                },

            ],
        }
    },
    methods: {
        search() { },
        viewComment() {
            this.isComment = true
        },
        delComment() {

        },
        viewDetail() {
            this.isDetail = true
        },
        revoke() { },
        handleSelect(index){
            this.selectIndex=index
        }

    },
    computed: {

    },
    components: {
        SelectBar
    }


}
</script>

<style scoped>
.title {
    font-size: larger;
    margin: 10px 10px 30px 0;
    /* font-family: Microsoft YaHei; */
}

.bar-father {
    display: flex;
    /* margin-left: 10px; */
}

.selected-bar {
    background-color: #fff;
    /* margin: 10px 10px; */
    padding: 5px 0px;
    border-bottom: #9370db solid 2px;
}

.bar {
    /* margin: 20px 20px; */
    padding: 15px 35px;
}

.bar-padding {
    background-color: #fff;
    border-radius: 5px 5px 0 0;
    padding: 10px 35px 15px 35px;
}

.handle {
    margin: 0 10px;
    color: #409EFF;
    /* 鼠标移上去有手形 */
    cursor: pointer
}

.box {
    width: 1200px;
    margin: 0px 10px 20px 10px;
    padding: 10px 10px 30px 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.upload {
    margin: 10px;
    background-color: rgb(244, 243, 243);
    height: 350px;
    width: 530px;
    position: relative;
}

.upload-icon {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 80px;
    color: rgb(199, 199, 199);

}

.goods-box {
    display: flex;
    margin: 10px 10px 20px 10px;
    align-items: center;
}

.words {
    margin: 0 10px 20px 10px;
}

.text-container {
    overflow: hidden;
    max-height: 10px;
}
</style>